<template>
  <div style="height: 100%">
    <div class="autoScroll_y">
      <div class="selectBlock flexTitlePadding">
        <!--<div class="viewBoxTitle flexTitle">-->
          <!--<span>模板管理</span>-->
        <!--</div>-->
        <div style="margin-top: 14px;">
          <el-row :gutter="25">
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入模板标题" v-model="queryCondition.code" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入模板编码" v-model="queryCondition.code" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入模板关键字" v-model="queryCondition.keyword" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-select size="small" placeholder="请选择模板状态" v-model="queryCondition.status" clearable>
                <el-option v-for="item in statusOptions"  v-if="item.key != '2'" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="25" style="padding-top: 12px;">
            <el-col :span="12" >
              <div class="searchBtnGroup" style="display: inline-block; text-align: left">
                <el-button type="success" size="mini" class="size" icon="el-icon-success" @click="saveData">保存</el-button>
                <!--<el-button type="primary" size="mini" class="size" icon="el-icon-delete" @click="clearData">清空</el-button>-->
              </div>
            </el-col>
            <el-col :span="12" >
              <div class="searchBtnGroup" style="display: inline-block; text-align: right">
                <el-button size="mini" type="primary" icon="el-icon-search" @click="fetchData" >查 询</el-button>
                <el-button size="mini" type="info" icon="el-icon-close" @click="closeComponent">关 闭</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="elementTableBox">
        <el-table ref="singleTable" v-loading="listLoading" :data="tableData" @row-contextmenu="rowContextmenu" @cell-dblclick="cellClick" @row-click="rowClick"
                  @sort-change="sortChange" @current-change="handleCurrentChange" @selection-change="handleSelectionChange"
                  class="elementTable" header-cell-class-name="elementTableHeader"
                  cell-class-name="elementTableBody" element-loading-text="给我一点时间" size="small" height="320" stripe highlight-current-row style="width: 100%;">
          <el-table-column align="center" label="序号" width="50px" type="index">
            <template slot-scope="scope">
              <span>{{scope.$index + (pagingArgs.currentPageNo - 1) * queryArgs.rowBounds.limit + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column type="selection" prop="myCheck" width="50" ></el-table-column>
          <el-table-column prop="code" align="left" sortable="custom" :show-overflow-tooltip="true" label="模板编码"></el-table-column>
          <el-table-column prop="title" align="left" :show-overflow-tooltip="true" label="模板标题"></el-table-column>
          <el-table-column prop="keyword" align="left" :show-overflow-tooltip="true" label="关键字"></el-table-column>
          <el-table-column prop="sort" align="center" sortable="custom" :show-overflow-tooltip="false" label="排序号" width="100"></el-table-column>
          <el-table-column prop="status" align="center" :show-overflow-tooltip="false" label="状态" width="80">
            <template slot-scope="scope">
              <span>{{scope.row.status | statusFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="etime" align="center" :show-overflow-tooltip="false" label="最后编辑时间" width="150"></el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background @size-change="pageSizeChange" @current-change="pagingQuery" :current-page="pagingArgs.currentPageNo"
                         :page-sizes="pageSizes" :page-size="queryArgs.rowBounds.limit" layout="total, sizes, prev, pager, next, jumper" :total="pagingArgs.totalCount">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '@/styles/newstyle.scss'
  import {
    selectTemplateInfo
  } from '@/api/templateManage/TplTemplateInfo.js'

  import {
    statusOptions,
    statusKeyValue
  } from '@/utils/allOptions'

  export default {
    data() {
      return {
        loading: false,
        listLoading: false,
        tableData: [], // 列表数据
        pageSizes: [10, 20, 50, 100],
        // 分页参数
        pagingArgs: {
          currentPageNo: 1,
          totalCount: 0
        },
        queryArgs: {
          sort: [
            {
              property: 'sort',
              direction: 'ASC'
            }
          ],
          rowBounds: {
            offset: 0,
            limit: 10
          }
        },
        // 查询参数
        queryCondition: {
          code: '',
          title: '',
          keyword: '',
          status: ''
        },
        statusOptions: statusOptions,
        checkRecord: []
      }
    },
    watch: {
      // 普通的watch监听通的watch监听
    },
    computed: {

    },
    filters: {
      statusFilter(target) {
        return statusKeyValue[target]
      }
    },
    components: {
      //
    },
    /**
     * 组件创建完成后，查询列表数据
     */
    created() {

    },
    // 画面刚进入method
    mounted() {
      this.fetchData()
    },
    methods: {
      rowClick() {
        // 行单击事件
      },
      cellClick(row, column, cell, event) {
        // 列单击事件
      },
      rowContextmenu(row, column, e) {
        // 右键菜单
        window.event.returnValue = false
      },
      sortChange(col) {
        //
        if (col.prop) {
          let tempDirection = 'ASC'
          if (col.order === 'descending') {
            tempDirection = 'DESC'
          }
          const sort = {
            property: col.prop,
            direction: tempDirection
          }
          this.queryArgs.sort = []
          this.queryArgs.sort.push(sort)
          this.fetchData()
        }
      },
      pageSizeChange(val) {
        this.queryArgs.rowBounds.limit = val
        this.queryArgs.rowBounds.offset = 0
        this.pagingArgs.currentPageNo = 1
        this.fetchData()
      },
      pagingQuery(val) { // 分页
        this.queryArgs.rowBounds.offset = (val - 1) * this.queryArgs.rowBounds.limit
        this.pagingArgs.currentPageNo = val
        this.fetchData()
      },
      buildQueryConditions() {
        let tempQueryCondition = []
        let queryType = 'LIKE'
        let query = {}
        for (let key in this.queryCondition) {
          let queryValue = this.queryCondition[key]
          if (queryValue != null && queryValue !== '') {
            queryType = 'LIKE'
            if (key === 'status') {
              queryType = 'EQ'
            }
            query = {
              property: key,
              value: queryValue,
              type: queryType
            }
            tempQueryCondition.push(query)
          }
        }
        return tempQueryCondition
      },
      clearQueryConditions() {
        for (let key in this.queryCondition) {
          this.queryCondition[key] = ''
        }
      },
      fetchData() { // 获取内容
        this.queryArgs.condition = this.buildQueryConditions()
        this.listLoading = true
        selectTemplateInfo(this.queryArgs).then(res => {
          this.listLoading = false
          let rvData = res.data.data
          if (rvData) {
            let records = rvData.records
            // if (records) {
            //   records.forEach((item, index) => {
            //     // 格式化时间
            //     item.etime = this.timeFormat(item.etime)
            //   })
            // }
            this.tableData = records
            this.pagingArgs.totalCount = rvData.count
          }
        }).catch(() => {
          //
          this.listLoading = false
        })
      },
      handleCurrentChange(currentRow, oldCurrentRow) {
        //
      },
      handleSelectionChange(selection) {
        this.checkRecord = selection
      },
      saveData() {
        if (!this.checkRecord || this.checkRecord.length <= 0) {
          this.$message({
            type: 'error',
            message: '请选择模板！'
          })
          return
        }
        let data = []
        this.checkRecord.forEach((item, index) => {
          if (item) {
            data.push({
              templateId: item.id,
              templateCode: item.code
            })
          }
        })
        this.$emit('closeComponent', 'save', data)
      },
      clearData() {
        this.$emit('closeComponent', 'clear')
      },
      closeComponent() {
        this.$emit('closeComponent')
      }
    }
  }
</script>
<style scoped>
  .flexTitlePadding {
    padding: 0px 10px;
    margin: 0px;
  }
  .flexTitle {
    padding: 5px 0px;
  }
  .elementTableBox {
    padding: 5px 10px;
    width: 100%;
    background: #ffffff;
    margin-top: 5px;
  }
</style>
